<template>
	<div class="container-box">
		<div class="gouba">主人，页面被我吃掉惹<br />(￣y▽￣)╭</div>
		<div class="footer">
			您所访问的资源不存在或您没有权限访问此页面,我们会在4秒后返回首页
		</div>
	</div>
</template>

<script>
	export default {
		created() {
			this.$message({
				message: "哒咩 您所访问的资源不存在或您没有权限访问此页面",
				duration: "4000",
				type: "error",
				offset: "80",
			});
			this.$nextTick(() => {
				document.oncontextmenu = new Function("event.returnValue=false");
				document.onselectstart = new Function("event.returnValue=false");
			});
			setTimeout(() => {
				this.$router.push("/home");
			}, 4000);
		},
	};
</script>

<style>
	.container-box {
		width: 100vw;
		height: 100vh;
		margin: 0;
		padding: 0;
		background: url("../assets/image/404bg.jpg") no-repeat;
		background-size: 100% 100%;
	}
	.gouba {
		width: 800px;
		height: 400px;
		position: absolute;
		left: 65%;
		top: 50%;
		transform: translate(-50%, -50%);
		text-align: center;
		font-size: 80px;
		font-weight: 700;
		color: rgb(146, 226, 253);
	}
	.footer {
		position: absolute;
		bottom: 10%;
		right: 15%;
		font-size: 18px;
		color: rgb(255, 245, 245);
	}
</style>